<template>
  <div class="header">
     <div class="item" v-for="(item,index) in items" :class="{ active: (!$route.query.tab===true&&index==0)?true:$route.query.tab===item.url }">
     	<router-link :to="{ name: 'Home' , query: {tab:item.url}}">{{item.name}}</router-link>
     </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
       items:[
          {
          	name:'全部',
          	url:'all'
          },
          {
          	name:'精华',
          	url:'good'
          },
          {
          	name:'分享',
          	url:'share'
          },
          {
          	name:'问答',
          	url:'ask'
          },
          {
          	name:'招聘',
          	url:'job'
          },
       ]
    }
  }
}
</script>


<style lang="stylus" scoped>
.header
	line-height 50px
	background #fff
	display flex 
	flex-flow row wrap  
	.item
		display flex
		flex 0 0 20%
		justify-content center
		position relative
		a
			color #a2a2a2
			text-decoration none
			display block
			font-size 14px
		&:after
			position absolute
			content ''
			left 0
			bottom 0px
			right 0
			background #80bd01
			height 3px
			transform scale(0)
			transition all 300ms
	.active
		a
			color #000
		&:after
			transform scale(1)
</style>
